<template>
	<div class="circle-rate" :class="right?'right':''">
		<div class="topRadio">{{ val }}</div>
		<div class="radioText">
			<span> {{ text }}</span>
			<span> {{ mbit }}</span>
		</div>
	</div>
</template>
<script setup>
  import {ref, reactive, defineProps, onMounted, watch, toRefs} from "vue";
  // export default {
    // name: "CircleRate",
  // 	props:{
  //     src: {
  //       type: String,
  // 			// default:'../assets/iconBorder/icon-shijian.png'
  // 			default:'iconBorder/icon-shijian.png'
  //     },
  //     num: {
  //       type: String,
  //     },
  //     text: {
  //       type: String,
  //     }
  // 	}
  // }
  const props = defineProps({
    val: {
      type: String,
    },
    text: {
      type: String,
    },
    right: {
      type: String,
    },
  });
  const { val, text, right} = toRefs(props);

  onMounted(() => {});
</script>
<style lang='less' scoped>
	.right{
		flex-direction: row !important;
	}
	.circle-rate {
		/*width: 20%;*/
		/*height: 100%;*/
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;

		.topRadio {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #d6e3ea;
			font-size: 16px;
			width: 70px;
			height:70px;
			background-image: url("../assets/iconBorder/yuanhuan.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			margin: 0 auto;
		}
		.radioText {
			color: #9da4b1;
			font-size: 14px;
			width: 78px;
			text-align: center;
			span {
				display: block;
			}
		}
	}
</style>
